<!DOCTYPE html>
<html>

<head>
    <title>@我的</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>


    <script>
        $(function () {
            //回显所有未读状态的@
            var data = sessionStorage.getItem("user");
            var user = JSON.parse(data);
            var userId = user.id;
            //先查询到自己所有未读的@信息
            $.get("/atwho/listAll", {id: userId}, function (data) {
                if (data) {
                    //进行渲染
                    $(".atMe").renderValues({list: data.list}, {
                        setId: function (item, value) {
                            var href = value;
                            $(item).attr("id", href)
                        }
                    });
                }
            })
            //回显所有未读的@评论
            $.get("/atwho/listAllCommend", {id: userId}, function (data) {
                if (data) {
                    //进行渲染
                    console.log(data);
                    $(".atCommend").renderValues({list: data.list}, {
                        setId: function (item, value) {
                            var href = value;
                            $(item).attr("id", href)
                        }
                    });
                }
            })

            //必须先等待整个页面全部加载完才能动态绑定
            $("#XXX").on("click", ".seeAtMe", function () {
                var id = $(this).attr("id")
                console.log(id);
                var href = $(this).data(href)
                //去他妹的,这是json对象,得先取值
                var href = href.href;
                //先发送一个ajax请求,将这个@变为已读
                $.get("/atwho/read", {id: id}, function (data) {
                    window.location.href = href;
                })
            })

            //动态绑定评论中@的跳转
            //必须先等待整个页面全部加载完才能动态绑定
            $("#comment").on("click", ".seeAtMe", function () {
                var id = $(this).attr("id")
                console.log("点击评论@跳转");
                var href = $(this).data(href)
                var pre = $(this).data('num')
                //去他妹的,这是json对象,得先取值
                var href = pre + href.href;
                console.log(href);
                //先发送一个ajax请求,将这个@变为已读
                $.get("/atwho/readCommentAt", {id: id}, function (data) {
                    window.location.href = href;
                })
            })


        })
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="/mine/message.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>未读的@我的</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<!--同样的,使用jrender渲染回显,循环遍历-->
<div class="container atMe" id="XXX">
    <dl class="list" render-loop="list">
        <dd>
            <a role="button" class="seeAtMe" render-attr="data-href=list.url" render-fun="setId" render-key="list.id">
                <p>您的好友:<span class="title" render-html="list.userName"></span>在新游记中@了您,快去看看吧!</p>
            </a>
        </dd>
    </dl>
</div>
<hr/>
<!--在评论中@我-->
<div class="container atCommend" id="comment">
    <dl class="list" render-loop="list">
        <dd>
            <a role="button" class="seeAtMe" data-num="/mine/travelComment.html?id=" render-fun="setId" render-key="list.id"
               render-attr="data-href=list.detailId">
                <p>您的好友:<span class="title" render-html="list.nickName"></span>在他的评论中@了您,快去看看吧</p>
            </a>
            <textarea style="width:80%; height:70px" readonly="true" render-html="list.content"></textarea>
        </dd>
    </dl>
</div>


</body>

</html>